<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品编码" style="margin-right:15px" label-width="120px" >
              <el-input v-model="form.goodCode" placeholder="请输入货品编码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品条码" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.goodsBarCode" placeholder="请输入货品条码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品名称" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.goodsName" placeholder="请输入货品名称" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="单位" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.goodsUnitName" placeholder="请输入单位" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="收货数量" style="margin-right:15px" label-width="120px" prop="receivedQuantity">
              <el-input v-model="form.receivedQuantity" type="number" :min="1" placeholder="请输入收货数量" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品状态" style="margin-right:15px" label-width="120px" prop="goodsStatus" >
              <inventoryStatusSelect ref="inventoryStatusSelectRef" :val1="this.form.shipmentCode" @setInventoryStatus="setInventoryStatus" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row v-if="this.form.batchRuleVO.gmtManufacture == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="生产日期" style="margin-right:15px" label-width="120px" prop="gmtManufacture">
              <el-date-picker
                v-model="form.gmtManufacture"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                align="right"
                style="width:100%"
                type="date"
                @change="funcChangeGmtManufacture"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row  v-if="form.batchRuleVO.gmtExpire == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="过期日期" style="margin-right:15px" label-width="120px" prop="gmtExpire">
              <el-date-picker
                v-model="form.gmtExpire"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                align="right"
                style="width:100%"
                type="date"
                @change="funcChangeGmtExpire"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.supplier == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="供应商" prop="supplier" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.supplier" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.serialNumber == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="序列号" prop="serialNumber" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.serialNumber" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendOne == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="生产批号" prop="extendOne" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendOne" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendTwo == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="商品批次" prop="extendTwo" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendTwo" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendThree == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展3" prop="extendThree" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendThree" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendFour == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展4" prop="extendFour" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendFour" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendFive == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展5" prop="extendFive" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.extendFive"
                value-format="yyyy-MM-dd"
                align="right"
                style="width:75%"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendSix == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展6" prop="extendSix" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.extendSix"
                value-format="yyyy-MM-dd"
                align="right"
                style="width:75%"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="容器" prop="containerBarCode" style="margin-right:15px" label-width="120px">
              <el-select value-key="code" v-model="containerEle" placeholder="请选择" @change="changeContainer($event)" clearable>
                <el-option
                  v-for="item in containerList"
                  :key="item.code"
                  :label="item.barCode"
                  :value="item"
                  clearable
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">保 存</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import inventoryStatusSelect from '@/views/components/inventoryStatusElSelect.vue'
// 时间格式控件
import moment from 'moment'
import { goodsUnitConversion, receiveCheckSubmit ,receiveRegisterAdd, getReceiveRegister} from '@/api/inStorage'
import { containerCanUseList } from '@/api/basicInfo'
Vue.use(VXETable)
export default {
  components:{
    inventoryStatusSelect
  },
  name: 'receiveCheckInEdit',
  props: {
    operationCode: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      isDisable: false,
      containerEle: null, // 容器对象
      form: {
        code:'',              //数据标识 ,
        gmtExpire:'',              //过期日期 ,
        gmtManufacture:'',              //生产日期 ,
        gmtStock:'',
        goodsBarCode:'',              //商品条码 ,
        goodsCode:'',              //商品编码 ,
        goodsName:'',              //商品名称 ,
        goodsUnitName:'',              //单位 ,
        planQuantity:'',              //计划数量 ,
        receiveCode:'',              //收货单号 ,
        receivedQuantity:'',              //收货数量 ,
        refundQuantity:'',              //退货数量 ,
        remarks:'',              //备注 ,
        status:'',              //状态
        goodsStatus: '',
        goodsStatusName: '',
        expirationQuantity: 0,  // 商品保质期（天）
        containerBarCode: '',   // 容器号条形码
        containerType: '',   // 容器类型
        // 批次规则，0：不显示，1：显示；
        batchRuleVO: {
          gmtManufacture: 0,
          gmtExpire: 0,
          supplier: 0,
          serialNumber: 0,
          extendOne: 0,
          extendTwo: 0,
          extendThree: 0,
          extendFour: 0,
          extendFive: 0,
          extendSix: 0,
        },
      },
      rules: {
          name: [
            {required: true, message: '请输入承载类型名称', trigger: 'blur'},
          ],
          skuQuantity: [
            {required: true, message: '请输入SKU种数', trigger: 'blur'},
          ],
          quantity: [
            {required: true, message: '请选择托盘数量', trigger: 'blur'},
          ],
          gmtManufacture: [
            {required: true, message: '请选择生产日期', trigger: 'blur'},
          ],
          gmtExpire: [
            {required: true, message: '请选择过期日期', trigger: 'blur'},
          ],
          supplier: [
            {required: true, message: '请填写供应商', trigger: 'blur'},
            {max: 50, message: '供应商最多50个字符', trigger: 'change'},
          ],
          serialNumber: [
            {required: true, message: '请填写序列号', trigger: 'blur'},
            {max: 20, message: '序列号最多20位', trigger: 'change'},
          ],
          extendOne: [
            {required: true, message: '请填写生产批号', trigger: 'blur'},
          ],
          extendTwo: [
            {required: true, message: '请填写商品批次', trigger: 'blur'},
          ],
          extendThree: [
            {required: true, message: '请填写扩展3', trigger: 'blur'},
          ],
          extendFour: [
            {required: true, message: '请填写扩展4', trigger: 'blur'},
          ],
          extendFive: [
            {required: true, message: '请选择扩展5', trigger: 'blur'},
          ],
          extendSix: [
            {required: true, message: '请选择扩展6', trigger: 'blur'},
          ],

          receivedQuantity: [
            {required: true, message: '请输入收货数量', trigger: 'blur'},
            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '数量必须大于0' }
          ],
          goodsStatus: [
            {required: true, message: '请选择货品状态', trigger: 'blur'},
          ],
        },
      containerList: [],
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      getReceiveRegister(this.operationCode).then(response => {
        const result = response.data
        if (!result.batchRuleVO) {
            result.batchRuleVO =  {
              gmtManufacture: 0,
              gmtExpire: 0,
              supplier: 0,
              serialNumber: 0,
              extendOne: 0,
              extendTwo: 0,
              extendThree: 0,
              extendFour: 0,
              extendFive: 0,
              extendSix: 0,
          }
        }
        this.form = result
        // 收货数量
        this.form.receivedQuantity = response.data.planQuantity - response.data.receivedQuantity
        this.containerEle = null
      }).then(()=>{
        this.$refs.inventoryStatusSelectRef.init(this.form.shipmentCode)
        // 获取容器列表
        this.queryContainers(this.form.receiveCode)
      })
    },
    // 生产日期改变时，如果过期日期为空，则根据保质期回填过期日期
    funcChangeGmtManufacture(value){
      let newDate = this.funcCalcDate(value, this.form.expirationQuantity);
      this.$set(this.form, 'gmtExpire', newDate)
    },
    // 过期日期改变时，如果生产日期为空，则根据保质期回填生产日期
    funcChangeGmtExpire(value){
      let newDate = this.funcCalcDate(value, 0-this.form.expirationQuantity);
      this.$set(this.form, 'gmtManufacture', newDate)

    },
    // 计算日期
    funcCalcDate(oldDateStr, diffDateCount) {
      let newDate = new Date();
      let oldDate = new Date(oldDateStr)
      newDate.setFullYear(oldDate.getFullYear())
      newDate.setMonth(oldDate.getMonth())
      newDate.setDate(oldDate.getDate() + diffDateCount)
      let newDateStr = moment(newDate).format("YYYY-MM-DD");
      return newDateStr;
    },

    // 提交
    funcSubmit() {
      this.isDisable = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.receiveItemCode = this.form.code
          const data = this.form
          receiveRegisterAdd(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherEditMethod')
          })
          .catch(() => this.isDisable = false)
          .finally(()=>{
            this.isDisable = false;
          })

        } else {
          this.isDisable = false;
          return false
        }
      })
    },

    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    },
    // 库存状态
    setInventoryStatus(obj){
      this.$set(this.form, 'goodsStatus', obj.code);
      this.$set(this.form, 'goodsStatusName', obj.name);
    },

    // 获取可用容器列表
    queryContainers(receiveCode){
      containerCanUseList(receiveCode).then((response)=>{
        this.containerList = response.data;
      })
    },
    // 选择容器信息
    changeContainer(e){
      this.containerEle = e
      this.form.containerBarCode = e.barCode
      this.form.containerType = e.type
    },

  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
